<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline style="text-align: right">
      <el-form-item prop="versionCode" label="当前版本">
        <el-select v-model="queryParams.versionCode" placeholder="选择版本" style="width: 260px" @change="handleQuery">
          <el-option v-for="dict in versionList" :key="dict.versionId" :label="`${dict.versionName} (${dict.versionCode})`" :value="dict.versionCode">
            <span :style="{ color: dict.isEnable ? '#67c23a' : '#909399' }">● </span>
            <span>{{ `${dict.versionName} (${dict.versionCode})` }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item prop="chkitemType" label="检查项类型">
        <el-select v-model="queryParams.chkitemType" placeholder="选择检查项类型" style="width: 130px" @change="handleQuery">
          <el-option v-for="dict in dict.type.cq_eval_chkitem_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <div class="list">
      <el-card class="item" shadow="hover" v-for="(item, index) in list" :key="index" @click.native="onItem(item)">
        <svg-icon class="icon" :icon-class="item.icon || 'build'" :style="{ color: item.iconColor || '#409eff' }" />
        <div>{{ item.chkitemName }}</div>
      </el-card>
    </div>
  </div>
</template>
<script>
// 检查项分类
import { mapMutations, mapState } from 'vuex'
import auth from '@/plugins/auth'
import { CQ_EVAL_CHKITEM_TYPE as CHKITEM_TYPE, CQ_EVAL_BUSS_BELONG as BUSS_BELONG } from '@/utils/baseData'
import { listVersion, chkitemTypeList } from '@/api/checkScore/cqEval'
export default {
  name: 'ChkitemList',
  dicts: ['cq_eval_chkitem_type'],
  data() {
    return {
      listLoading: false,
      list: [],
      queryParams: {
        versionCode: '',
        chkitemType: CHKITEM_TYPE.CHKITEMTYPE,
        bussBelong: BUSS_BELONG.CQEVAL,
        isEnable: 1
      },
      versionLoading: false,
      versionList: []
    }
  },
  computed: {
    ...mapState('cqEval', ['chkitemListStore'])
  },
  beforeRouteLeave(to, from, next) {
    // 暂存已选的版本号
    const { versionCode } = this.queryParams
    this.setChkitemListStore({ versionCode })
    next()
  },
  created() {
    this.getVersionList()
  },
  methods: {
    ...mapMutations('cqEval', ['setChkitemListStore']),
    async getVersionList() {
      this.versionLoading = true
      const res = await listVersion().catch(() => false)
      this.versionLoading = false
      if (res === false) return

      const data = res.data || []
      // 排序。启用的置前
      data.sort((a, b) => (+b.isEnable || 0) - (+a.isEnable || 0))

      this.versionList = data
      this.queryParams.versionCode = this.chkitemListStore?.versionCode || data[0]?.versionCode || ''
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await chkitemTypeList(this.queryParams).catch(() => false)
      this.listLoading = false
      if (res === false) return

      // 过滤启用且有权访问的检查项
      let data = res.data || []
      data = data.filter(i => i.isEnable && i.permCode && auth.hasPermi(`cq:eval:${i.permCode}:list`))
      this.list = data
    },
    handleQuery() {
      this.getList()
    },
    onItem(item) {
      if (this.queryParams.chkitemType !== CHKITEM_TYPE.CHKITEMTYPE) return this.msgInfo('该检查项类型暂不支持操作')
      // if (item.specialRule === 'Quality') {
      //   if (item.chkitemCode === 'GC-001-001') {
      //     this.$router.push({ path: `/checkScore/courseCheck/constructionCourse`, query: item })
      //   } else if (item.chkitemCode === 'GC-001-002') {
      //     this.$router.push({ path: `/checkScore/courseCheck/handcover`, query: item })
      //   } else if (item.chkitemCode === 'GC-001-003') {
      //     this.$router.push({ path: `/checkScore/courseCheck/gldzList`, query: item })
      //   }
      //   return
      // }
      const { chkitemCode, specialRule } = item
      if (specialRule) return this.$router.push({ path: `/checkScore/specialRule/${chkitemCode}`, query: item })
      this.$router.push({ path: `/checkScore/chkitemScore/${chkitemCode}`, query: item })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  min-height: 100%;
  padding: 20px;
  background-color: #f6f8f9;
}
.list {
  display: flex;
  flex-wrap: wrap;
  zoom: 1.5;
}
.item {
  min-width: 120px;
  font-size: 14px;
  margin: 0 20px 20px 0;
  text-align: center;
  cursor: pointer;
  .icon {
    width: 50px;
    height: 50px;
    transition: all 0.3s ease-in-out;
    margin-bottom: 10px;
  }
  &:hover .icon {
    transform: scale(1.15);
  }
}
</style>
